<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:mywidgets="http://xmlns.jcp.org/jsf/composite/widgets">

<ui:composition
	xmlns:mywidgets="http://xmlns.jcp.org/jsf/composite/widgets">
	<div id="header" class="bodyElement">
	
		<ui:remove>
	
		<div id="headerRealEstateAd"
			style="position: absolute; left: -370px; top: -30px">
			<h:link outcome="/realestate/availability.jsf">
				<div id="appartmentLink"
					style="position: absolute; float: left; left: 100px; top: 100px; width: 160px; height: 160px; border-radius: 280px; padding: 50px; background: #EFEFEF; font-family: Georgia; color: gray; font-variant: normal;">
					<span style="position: relative; left: -10px; top: 0px;"> <span
						id="appLinkBubbleTitle"
						style="position: relative; left: -20px; font-weight: bolder; font-style: italic; font-size: 40px;">
							Reserva<br/><nobr>Apartmento</nobr> <nobr>en Palma</nobr>
					</span>
					</span>
					<div class="appLinkBubbleSubText"
						style="font-size: 18pt; color: #EFEFEF; line-height: 24px; position: absolute; left: 50px; top: 150px; opacity: 0;">
						<nobr>Wohnung</nobr>
						<nobr>in Palma</nobr>
					</div>
					<div class="appLinkBubbleSubText"
						style="font-size: 18pt; color: #EFEFEF; line-height: 24px; position: absolute; left: 24px; top: 180px; opacity: 0;">
						<nobr>Apartment</nobr>
						<nobr>in Palma</nobr>
					</div>
				</div>
			</h:link>
		</div>


		<script>

			$("#appartmentLink").mouseenter(function() {
				$("#appLinkBubbleTitle").animate({
				opacity: 0.5,
				fontSize: "30px",
				color: "red"
				//left: "+=50",
				//height: "toggle"
				}, 500 , function() {
				// Animation complete.
				}
				);

				$(".appLinkBubbleSubText").animate({
					opacity: 1,
					//fontSize: "30px",
					color: "gray"
					//left: "+=50",
					//height: "toggle"
					}, 1000 , function() {
					// Animation complete.
					}
					);
				
			}).mouseleave(function() {
				$("#appLinkBubbleTitle").animate({
					opacity: 1,
					fontSize: "40px",
					color: "gray"
					//left: "+=50",
					//height: "toggle"
					}, 1000 , function() {
					// Animation complete.
					}
					);

				$(".appLinkBubbleSubText").animate({
					opacity: 0.0,
					//fontSize: "30px",
					color: "#EFEFEF"
					//left: "+=50",
					//height: "toggle"
					}, 500 , function() {
					// Animation complete.
					}
					);
				});
			
			</script>
			
			</ui:remove>

		<h:link outcome="/index">
			<h:graphicImage id="logoImage"
				value="/resources/media/brayancomlogo.png" border="0"
				alt="Welcome to brayan.com" />
		</h:link>
		<div id="headerDateElement">
			<h:outputText value="#{session.lastAccessedTime}">
				<f:convertDateTime pattern="EEEE, MMMM d yyyy" type="date" />
			</h:outputText>
		</div>
		<div id="headerLocationElement"
			title="This is a location service. It alerts if there's a chance to meet up with Brayan.">
			Hook up with Brayan for a get-together. Accept your browsers location
			service.</div>
			
		<div id="headerLoginElement">
			<mywidgets:login />
		</div>

	</div>
</ui:composition>
</html>
